<template>
  <el-form
    ref="searchRef"
    size="mini"
    :inline="true"
    label-width="85px"
    :model="ruleForm"
    :rules="rules"
    class="demo-ruleForm"
  >
    <el-row :gutter="12">
      <el-col :sm="12" :md="8" :lg="6">
        <el-form-item class="cc-label" label="名称：" prop="name">
          <el-input v-model="ruleForm.name" clearable placeholder="请输入名称" />
        </el-form-item>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <el-form-item class="cc-label" label="类型选择：" prop="name">
          <el-select v-model="ruleForm.type" clearable placeholder="请选择类型">
            <el-option label="类型一" value="shanghai" />
            <el-option label="类型二" value="beijing" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <el-form-item class="cc-label" label="性别选择：" prop="sex">
          <el-select v-model="ruleForm.sex" clearable placeholder="请选择性别">
            <el-option label="男" value="shanghai" />
            <el-option label="女" value="beijing" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <el-form-item class="cc-label" label="开始日期：" prop="startDate">
          <el-date-picker v-model="ruleForm.startDate" class="cc-label" clearable type="date" placeholder="开始日期" />
        </el-form-item>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <el-form-item class="cc-label" label="结束日期：" prop="endDate">
          <el-date-picker v-model="ruleForm.endDate" class="cc-label" clearable type="date" placeholder="结束日期" />
        </el-form-item>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="submitForm('ruleForm')">搜索</el-button>
          <el-button icon="el-icon-circle-close" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive
} from 'vue'
export default defineComponent({
  setup(props, context) {
    const searchRef = ref()
    const rules = {}
    const ruleForm = reactive({
      name: '',
      type: '',
      sex: '',
      startDate: '',
      endDate: ''
    })
    // 提交表单
    const submitForm = () => {
      searchRef.value.validate((valid: boolean) => {
        if (!valid) return false
        context.emit('mitForm', ruleForm)
      })
    }
    // 重置表单
    const resetForm = () => {
      searchRef.value.resetFields()
      context.emit('mitForm', ruleForm)
    }
    return {
      searchRef,
      rules,
      ruleForm,
      submitForm,
      resetForm
    }
  }

})
</script>

<style lang="scss" scoped>
  .demo-ruleForm {
    margin-top: 18px;
  }
</style>
